<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新冠病毒实时统计</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
          crossorigin="anonymous">
    <style>
        /*搜索框样式*/
        * {
            box-sizing:border-box;
        }

        div.search {
            padding:10px 0;
        }

        form {
            position:relative;
            width:300px;
            margin:0 auto;

        }

        input,button {

            border:none;

            outline:none;

        }

        input {
            width:100%;
            height:42px;
            padding-left:13px;
        }

        button {
            height:42px;
            width:42px;
            cursor:pointer;
            position:absolute;
        }

        .bar input {
            border:2px solid #717171;
            border-radius:5px;
            background:transparent;
            top:0;
            right:0;

        }

        .bar button {
            background: #878787;
            border-radius:0 5px 5px 0;
            width:60px;
            top:0;
            right:0;
        }

        .bar button:before {

            content:"搜索";

            font-size:13px;

            color:#F9F0DA;

        }


        /*表格样式*/
        table {
            *border-collapse: collapse; /* IE7 and lower */
            border-spacing: 0;
            width: 100%;
        }

        .bordered {
            border: solid #ccc 1px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            border-radius: 6px;
            -webkit-box-shadow: 0 1px 1px #ccc;
            -moz-box-shadow: 0 1px 1px #ccc;
            box-shadow: 0 1px 1px #ccc;
        }

        .bordered tr:hover {
            background: #dadada;
            -o-transition: all 0.1s ease-in-out;
            -webkit-transition: all 0.1s ease-in-out;
            -moz-transition: all 0.1s ease-in-out;
            -ms-transition: all 0.1s ease-in-out;
            transition: all 0.1s ease-in-out;
        }

        .bordered td, .bordered th {
            border-left: 1px solid #ccc;
            border-top: 1px solid #ccc;
            padding: 10px;
            text-align: left;
        }

        .bordered th {
            background-color: #dce9f9;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
            background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
            background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
            background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
            background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
            background-image: linear-gradient(top, #ebf3fc, #dce9f9);
            -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
            -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
            box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
            border-top: none;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
        }

        .bordered td:first-child, .bordered th:first-child {
            border-left: none;
        }

        .bordered th:first-child {
            -moz-border-radius: 6px 0 0 0;
            -webkit-border-radius: 6px 0 0 0;
            border-radius: 6px 0 0 0;
        }

        .bordered th:last-child {
            -moz-border-radius: 0 6px 0 0;
            -webkit-border-radius: 0 6px 0 0;
            border-radius: 0 6px 0 0;
        }

        .bordered th:only-child {
            -moz-border-radius: 6px 6px 0 0;
            -webkit-border-radius: 6px 6px 0 0;
            border-radius: 6px 6px 0 0;
        }

        .bordered tr:last-child td:first-child {
            -moz-border-radius: 0 0 0 6px;
            -webkit-border-radius: 0 0 0 6px;
            border-radius: 0 0 0 6px;
        }

        .bordered tr:last-child td:last-child {
            -moz-border-radius: 0 0 6px 0;
            -webkit-border-radius: 0 0 6px 0;
            border-radius: 0 0 6px 0;
        }

    </style>
</head>
<body>


<!--<div  class="" style="width: 1000px; height: auto; margin: auto;">-->
<div style="box-shadow: 0 0 4px rgba(0,0,0,0.1); width: 700px; height: auto; margin: auto">
        <h1 class="display-4" th:text="(${country}==null?'全球':${country})+'冠状病毒统计数据'"></h1>

        <p class="lead" th:text="'截止今天的'+(${country}==null?'全球':${country})+'新冠病毒总病例数'+${totalReportedCases}"></p>

        <p class="lead">当前时间
            <span th:text="${#temporals.format(localDate,'yyyy-MM-dd')}"></span>
        </p>

        <p>
            <span th:text="'自一日以来的'+(${country}==null?'全球':${country})+'冠状病毒新增病例数'"></span>
            <span th:text="${totalNewCases}"></span>
        </p>
    <div class="search bar">
        <form action="/" class="navListSearch">
            <input type="text" name="country">
            <button type="submit" ></button>
        </form>
    </div>
</div>
<div class="bar-chart" style="width: 50%; height: auto; margin: 50px auto;">
    <h5 class="" bar-title>疫情数据</h5>
    <canvas id="coronaVirus"></canvas>
    <canvas id="coronaVirusLastTenDays"></canvas>
</div>


<div style="width: 700px; margin: auto;">
    <table class="bordered">
        <tr>
            <th>州、省</th>
            <th>国家</th>
            <th>当前病例</th>
            <th>近一日新增病例</th>
        </tr>


        <tr th:each="stats : ${regionStats}">
            <td id="stats" th:text="${stats.getState()}"></td>
            <td th:text="${stats.getCountry()}"></td>
            <td th:text="${stats.getLatestTotalCases()}"></td>
            <td th:text="${stats.getDiffFromPrevDay()}"></td>
        </tr>

    </table>
</div>


<!--char.js 的链接-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"
        integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw=="
        crossorigin="anonymous"></script>
<script th:inline="javascript">
    let lastTenDays = [[${lastTenDaysCases}]]; //过去10天的疫情
    var data = {
        labels: [10, 9, 8, 7, 6, 5, 4, 3, 2, 1],
        datasets: [
            {
                label: "过去10天疫情",
                backgroundColor: "rgba(0,0,0,0.1",
                pointBackgroundColor: "rgba(255,48,48,0,2",
                data: lastTenDays
            }
        ]
    }

    var options = {};
    var ctx = document.getElementById("coronaVirusLastTenDays").getContext("2d");
    var coronaVirus = new Chart(ctx, {
        type: 'line',
        // type: 'bar',
        data: data,
        options: options
    });

</script>

<script th:inline="javascript">
    if ([[${country}]] == null) {
        let regionStats = [[${regionStats}]];
        let regionCountry = new Array();

        //获取所有国家
        let cacheCountry = {};
        for (var i = 0; i < regionStats.length; i++) {
            if (!cacheCountry[regionStats[i]["country"]]) {
                cacheCountry[regionStats[i]["country"]] = true;
                let total = 0;
                for (var j = i; j < regionStats.length && regionStats[j]["country"] == regionStats[i]["country"]; j++) {
                    total = total + regionStats[j]["latestTotalCases"];
                }
                regionCountry.push({"country": regionStats[i]["country"], "total": total});
            }
        }
        regionCountry = regionCountry.sort(function (a, b) {
            return b["total"] - a["total"];
        });

        var data = {
            labels: regionCountry.slice(0, 15).map(obj => {
                return obj.country
            }),
            datasets: [
                {
                    label: "全球前15多疫情的国家",
                    backgroundColor: "rgba(0,0,0,0.1",
                    pointBackgroundColor: "rgba(255,48,48,0,2",
                    data: regionCountry.slice(0.15).map(obj => {
                        return obj.total
                    })
                }
            ]
        };

        var options = {
            hover: {
                animationDuration: 0  // 防止鼠标移上去，数字闪烁
            },
            animation: {           // 这部分是数值显示的功能实现
                onComplete: function () {
                    var chartInstance = this.chart,
                        ctx = chartInstance.ctx;
                    // 以下属于canvas的属性（font、fillStyle、textAlign...）
                    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                    ctx.fillStyle = "black";
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';
                    this.data.datasets.forEach(function (dataset, i) {
                        var meta = chartInstance.controller.getDatasetMeta(i);
                        meta.data.forEach(function (bar, index) {
                            var data = dataset.data[index];
                            ctx.fillText(data, bar._model.x, bar._model.y - 5);
                        });
                    });
                }
            }
        };
        var ctx = document.getElementById("coronaVirus").getContext("2d");
        var coronaVirus = new Chart(ctx, {
            type: 'line',
            type: 'bar',
            data: data,
            options: options
        });

    }else{
        document.getElementById("coronaVirus").style.display="none";
    }
</script>


<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
</body>
</html>